<template>
    <view class="pub_page pub_ping_order pub_header_padding">
        <pub-head :headerConfig="headerConfig"></pub-head>
        <div class="pub_page_scroll page_box">
            <div class="tabs_div">
                <div class="tab" :class="orderType==1?'tab_active':''" @click="orderTypeClick(1)">未核销</div>
                <div class="tab" :class="orderType==2?'tab_active':''" @click="orderTypeClick(2)">已核销</div>
            </div>
            <div class="order_div">
                <div v-for="li in 20" class="li" :key="key">
                    <pub-image class="img" src="../../static/aimg/img_3.jpg" />
                    <div class="text">
                        <div class="name">有机玉米有机玉米有机玉米有机玉米有机玉米有机玉米</div>
                        <div class="price">
                            <span class="span_1">拼团价</span>
                            <span class="span_2">￥</span>
                            <span class="span_3">39.99</span>
                            <span class="span_4">￥69.99</span>
                        </div>
                        <div class="address">四川省宜昌市滨河花园107号</div>
                        <div class="mobile">联系电话：17898988787</div>
                    </div>
                    <div class="other">
                        <div class="status">未核销</div>
                        <div class="qrcode">查看二维码</div>
                    </div>
                </div>
            </div>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            headerConfig: {
                header_color: '#fff',
                title: '上门提货',//标题栏内容
                left_type: 3,
                title_color: '#000',
                left_content: 'dark',
            },

            orderType: 1,
            orderList: []
        };
    },
    onLoad() {

    },
    methods: {
        orderTypeClick(type) {
            this.orderType = type;
        }
    },
};
</script>

<style lang="scss" scoped>
.pub_ping_order {
    background-color: #F1F3F3;

    .tabs_div {
        width: 100%;
        height: 80rpx;
        display: flex;
        background-color: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.10);
        padding: 30rpx 24rpx 0 24rpx;

        .tab {
            height: 48rpx;
            line-height: 44rpx;
            margin: 0 32rpx 0 0;
            font-weight: 700;
            color: #3D3D3D;
            font-size: 28rpx;
            border-bottom: 4rpx solid #fff;
        }

        .tab_active {
            color: #E62017;
            border-bottom: 4rpx solid #E62017;
        }
    }

    .order_div {
        width: 100%;
        padding: 24rpx 32rpx;

        .li {
            background-color: #fff;
            margin-bottom: 24rpx;
            padding: 24rpx;
            border-radius: 24rpx;
            display: flex;
            flex-wrap: wrap;
            padding: 24rpx 32rpx;

            .img {
                width: 216rpx;
                height: 222rpx;
                border-radius: 8rpx;
                margin-right: 30rpx;
                overflow: hidden;
            }

            .other {
                width: 100%;
            }


            .text {
                width: calc(100% - 216rpx - 30rpx);
                display: flex;
                flex-wrap: wrap;
                align-content: flex-start;

                .name {
                    width: 100%;
                    line-height: 40rpx;
                    color: #3D3D3D;
                    font-size: 32rpx;
                    font-weight: bold;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin: 10rpx 0;
                }

                .address {
                    height: 44rpx;
                    background-color: rgba(218, 56, 56, 0.10);
                    font-size: 20rpx;
                    border-radius: 8rpx;
                    color: #DA3838;
                    line-height: 44rpx;
                    padding: 0 8rpx;
                    margin: 4rpx 0 16rpx 0;

                    .span {
                        font-weight: 700;
                        font-size: 24rpx;
                    }
                }

                .price {
                    width: 100%;
                    height: 48rpx;
                    line-height: 48rpx;
                    display: flex;
                    align-items: baseline;
                    color: #E62017;
                    font-size: 24rpx;

                    .span_1 {
                        height: 30rpx;
                        line-height: 30rpx;
                        margin-right: 8rpx;
                    }

                    .span_2 {
                        height: 30rpx;
                        line-height: 30rpx;
                    }

                    .span_3 {
                        font-weight: 700;
                        font-size: 44rpx;
                    }

                    .span_4 {
                        font-size: 24rpx;
                        color: rgba(51, 51, 51, 0.45);
                        text-decoration: line-through;
                        margin-left: 16rpx;
                    }
                }

                .mobile {
                    font-size: 24rpx;
                    color: #333333;
                    line-height: 40rpx;
                }
            }
        }
    }
}
</style>
